<template>
  <div class="distribution-approval-detail-container">
    <t-card class="detail-card">
      <div class="detail-header">
        <h2>分销申请详情</h2>
      </div>

      <div class="detail-content">
        <div class="detail-left">
          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-label">所属地区：</div>
              <div class="detail-value">{{ detailData.region || '湖南省' }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">分销商名称：</div>
              <div class="detail-value">{{ detailData.distributorName || '湖南临湘碧水物流公司' }}</div>
            </div>
          </div>

          <div class="divider"></div>

          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-label">销售地市：</div>
              <div class="detail-value">{{ detailData.salesCity || '岳阳市' }}</div>
            </div>
          </div>

          <div class="divider"></div>

          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-label">申请数量：</div>
              <div class="detail-value">{{ detailData.applyAmount || '19000.000KG' }}</div>
            </div>
            <div class="detail-row">
              <div class="detail-label">申请时间：</div>
              <div class="detail-value">{{ detailData.applyTime || '2025-03-24 18:00:00' }}</div>
            </div>
          </div>

          <div class="divider"></div>

          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-label">凭证证明：</div>
              <div class="detail-value">
                <a href="javascript:;" class="proof-link">{{ detailData.proof || '查看凭证' }}</a>
              </div>
            </div>
          </div>

          <div class="divider"></div>

          <div class="detail-section">
            <div class="detail-row">
              <div class="detail-label">联系方式：</div>
              <div class="detail-value">{{ detailData.contactMethod || '13800138000' }}</div>
            </div>
          </div>
        </div>

        <div class="detail-right">
          <div class="status-card">
            <div class="status-row">
              <div class="status-label">申请状态：</div>
              <div class="status-value">{{ detailData.orderStatus || '待审核' }}</div>
            </div>
            <div class="status-row">
              <div class="status-label">审核时间：</div>
              <div class="status-value">{{ detailData.approvalTime || '' }}</div>
            </div>
            <div class="status-row">
              <div class="status-label">处理人员：</div>
              <div class="status-value">{{ detailData.approvalPerson || '' }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="action-buttons">
        <t-button theme="danger" variant="base" class="btn-reject" @click="rejectOrder">拒绝申请</t-button>
        <t-button theme="primary" variant="base" class="btn-approve" @click="approveOrder">通过申请</t-button>
      </div>
    </t-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { MessagePlugin } from 'tdesign-vue-next';

const router = useRouter();
const route = useRoute();

interface DetailData {
  id?: string;
  region?: string;
  distributorName?: string;
  salesCity?: string;
  applyTime?: string;
  applyAmount?: string;
  proof?: string;
  contactMethod?: string;
  orderStatus?: string;
  approvalTime?: string;
  approvalPerson?: string;
}

const detailData = reactive<DetailData>({});

// 获取详情数据
const fetchDetailData = () => {
  const id = route.params.id;
  const status = route.query.status as string;
  const region = route.query.region as string;

  // 根据状态设置不同的状态文本
  detailData.orderStatus = status || '待审核';

  // 这里应该是接口调用获取详情，这里使用模拟数据
  // 实际开发中，可以通过API获取数据
  detailData.id = id as string;

  // 设置基础数据
  detailData.region = region || '湖南省';

  if (detailData.region === '湖南省') {
    detailData.distributorName = '湖南临湘碧水物流公司';
    detailData.salesCity = '岳阳市';
  } else if (detailData.region === '四川省') {
    detailData.distributorName = '成都物流配送有限公司';
    detailData.salesCity = '成都市';
  }

  detailData.applyTime = '2025-03-24 18:00:00';
  detailData.applyAmount = '19000.000KG';
  detailData.proof = '查看凭证';
  detailData.contactMethod = '13800138000';

  if (detailData.orderStatus === '已通过') {
    detailData.approvalTime = '2025-03-25 09:30:00';
    detailData.approvalPerson = '张三';
  } else if (detailData.orderStatus === '已拒绝') {
    detailData.approvalTime = '2025-03-25 10:15:00';
    detailData.approvalPerson = '李四';
  }
};

// 拒绝申请
const rejectOrder = () => {
  MessagePlugin.warning('已拒绝该申请');
  setTimeout(() => {
    router.push('/distribution/approval');
  }, 1500);
};

// 通过申请
const approveOrder = () => {
  MessagePlugin.success('已通过该申请');
  setTimeout(() => {
    router.push('/distribution/approval');
  }, 1500);
};

onMounted(() => {
  fetchDetailData();
});
</script>

<style lang="less" scoped>
.distribution-approval-detail-container {
  width: 100%;
  padding: 16px;
  background-color: #f5f5f5;

  .detail-card {
    background-color: #fff;
    border-radius: 4px;

    .detail-header {
      padding: 16px 0;
      border-bottom: 1px solid #eee;

      h2 {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin: 0;
      }
    }

    .detail-content {
      display: flex;
      padding: 20px 0;

      .detail-left {
        flex: 3;
        padding-right: 40px;

        .detail-section {
          padding: 12px 0;

          .detail-row {
            display: flex;
            margin-bottom: 10px;

            &:last-child {
              margin-bottom: 0;
            }

            .detail-label {
              width: 140px;
              color: #666;
              text-align: right;
              margin-right: 8px;
            }

            .detail-value {
              flex: 1;
              color: #333;

              .proof-link {
                color: #0052D9;
                text-decoration: none;

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }

        .divider {
          height: 1px;
          background-color: #eee;
        }
      }

      .detail-right {
        flex: 1;
        padding-left: 20px;
        border-left: 1px solid #eee;

        .status-card {
          padding: 20px;
          background-color: #f9f9f9;
          border-radius: 4px;

          .status-row {
            display: flex;
            margin-bottom: 15px;

            .status-label {
              width: 80px;
              color: #666;
            }

            .status-value {
              flex: 1;
              color: #333;
              font-weight: 500;
            }
          }
        }
      }
    }

    .action-buttons {
      display: flex;
      justify-content: flex-end;
      padding: 20px 0;
      border-top: 1px solid #eee;

      .btn-reject {
        margin-right: 16px;
      }
    }
  }
}
</style>